<html>

<style>
    * {
        margin: 0;
    }

    #content {
        position: absolute;
        color: white;
        border: 1px solid rgb(71, 71, 71);
        padding: 20px;
        font-size: 14px;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        intersectTriangle
    </div>

    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        // 三角形三个点坐标
        const p1 = new THREE.Vector3(5, 2, 0);
        const p2 = new THREE.Vector3(5, -2, 0);
        const p3 = new THREE.Vector3(-5, 0, 0);

        {
            // 可视化，画出来三角形
            const vertices = new Float32Array([
                // 0, 2, 0, //顶点1坐标
                // 1, 2, 0, //顶点2坐标
                ...p1,
                ...p2,
                ...p3,
            ]);
            const attribue = new THREE.BufferAttribute(vertices, 3);
            // 创建一个空的几何体
            const geometry = new THREE.BufferGeometry();
            // 设置几何体attributes属性的位置属性
            geometry.attributes.position = attribue;
            const material = new THREE.LineBasicMaterial({
                color: 0xffff00,
                size: 0.2 //点对象像素尺寸
            });
            const points = new THREE.LineLoop(geometry, material); //点模型对象
            scene.add(points)
        }

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(6, 6, 6)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, canvasDom);


        // 2. 判断射线是否相交
        // 创建射线对象Ray
        const ray = new THREE.Ray()
        // 设置射线起点
        ray.origin.set(1, 0, 3);
        ray.direction = new THREE.Vector3(0, 0, -1);
        ray.direction = new THREE.Vector3(5,0,0).normalize();
       
        {
            // 可视化射线
            let k = 10;
            let x = k * ray.direction.x + 1;
            let y = k * ray.direction.y;
            let z = k * ray.direction.z + 3;

            const vertices = new Float32Array([
                1, 0, 3,
                x, y, z,
            ]);
            const attribue = new THREE.BufferAttribute(vertices, 3);
            // 创建一个空的几何体
            const geometry = new THREE.BufferGeometry();
            // 设置几何体attributes属性的位置属性
            geometry.attributes.position = attribue;
            const material = new THREE.LineBasicMaterial({
                color: 'white',
                size: 0.2 //点对象像素尺寸
            });
            const points = new THREE.Line(geometry, material); //点模型对象
            scene.add(points)
        }

        const point = new THREE.Vector3();//用来记录射线和三角形的交叉点
        // `.intersectTriangle()`计算射线和三角形是否相交叉，相交返回交点，不相交返回null
        // 参数4表示是否进行背面剔除
        const result = ray.intersectTriangle(p1, p2, p3, false, point);
        console.log('交叉点坐标', point);
        console.log('查看是否相交', result);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();
    </script>
</body>

</html>